.title {
    font-family: fantasy;
    font-size: 30px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197, 223, 248, 0.8), 3px 3px rgba(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba(197, 223, 248, 0.8);
    margin: 0;
    margin-left: 15px;
}

.block-title {
    color: rgb(98, 98, 98);
    font-weight: bold;
    margin: 5px;
    font-size: 20px;
}

.code-editor {
    position: relative;
    padding-top: 5px;
    height: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.content-area {
    width: 100%;
    height: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    overflow: scroll;
}

textarea {
    border: none;
    outline: none;
}

.CodeMirror {
    height: 100%;
}

.button {
    width: 140px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    border-radius: 5px;
    margin: 0 20px 20px 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.button.green {
    border: 1px solid #64c878;
    box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
    background: -webkit-linear-gradient(top, #90dfa2, #84d494);
    background: -moz-linear-gradient(top, #90dfa2, #84d494);
    background: linear-gradient(top, #90dfa2, #84d494);
}

.button.green:hover {
    background: -webkit-linear-gradient(top, #aaebb9, #82d392);
    background: -moz-linear-gradient(top, #aaebb9, #82d392);
    background: linear-gradient(top, #aaebb9, #82d392);
}

.button.green:active {
    box-shadow: 0 1px 3px #4d7254 inset, 0 3px 0 rgba(255, 255, 255, 0);
    background: -webkit-linear-gradient(top, #5eac6e, #72b37e);
    background: -moz-linear-gradient(top, #5eac6e, #72b37e);
    background: linear-gradient(top, #5eac6e, #72b37e);
}

.button.yellow {
    border: 1px solid #d2a000;
    box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
    background: -webkit-linear-gradient(top, #fece34, #d8a605);
    background: -moz-linear-gradient(top, #fece34, #d8a605);
    background: linear-gradient(top, #fece34, #d8a605);
}

.button.yellow:hover {
    background: -webkit-linear-gradient(top, #ffd859, #e3bb38);
    background: -moz-linear-gradient(top, #ffd859, #e3bb38);
    background: linear-gradient(top, #ffd859, #e3bb38);
}

.button.yellow:active {
    box-shadow: 0 1px 3px #816b1f inset, 0 3px 0 rgba(255, 255, 255, 0);
    background: -webkit-linear-gradient(top, #d3a203, #dba907);
    background: -moz-linear-gradient(top, #d3a203, #dba907);
    background: linear-gradient(top, #d3a203, #dba907);
}

.button.blue {
    border: 1px solid #1e7db9;
    box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset;
    background: -webkit-linear-gradient(top, #42a4e0, #2e88c0);
    background: -moz-linear-gradient(top, #42a4e0, #2e88c0);
    background: linear-gradient(top, #42a4e0, #2e88c0);
}

.button.blue:hover {
    background: -webkit-linear-gradient(top, #70bfef, #4097ce);
    background: -moz-linear-gradient(top, #70bfef, #4097ce);
    background: linear-gradient(top, #70bfef, #4097ce);
}

.button.blue:active {
    box-shadow: 0 1px 3px #114566 inset, 0 3px 0 #fff;
    background: -webkit-linear-gradient(top, #1a71a8, #1976b1);
    background: -moz-linear-gradient(top, #1a71a8, #1976b1);
    background: linear-gradient(top, #1a71a8, #1976b1);
}

.toolbar-button {
    height: 23px;
    width: 50px;
    margin-left: 10px;
}

.file-card {
    height: 20px;
    margin: 2px 0px 3px 5px;
    cursor: pointer;
    color: #949494;
}

.file-card:hover {
    background-color: #afe0ff;
    color: #000000;
}

.file-card.active {
    background-color: #afe0ff;
    color: #000000;
}

.file-name {
    margin-left: 5px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 20px;
    width: 100%;
    flex: 1 1;
    align-items: center;
    overflow: hidden;
}

.icon {
    height: 20px;
    width: 20px;
    border-radius: 3px;
}


.maybeWrong {
    position: relative;
}

.maybeWrong::before {
    content: '';
    position: absolute;
    bottom: -0.13em;
    width: 100%;
    height: 0.25em;
    background:
        linear-gradient(135deg, transparent, transparent 45%, #d87300, transparent 55%, transparent 100%),
        linear-gradient(45deg, transparent, transparent 45%, #d87300, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
    left: 0px;
}